<template>
  <div class="app-container">

    <el-card class="box-card">
      <h3>商品介紹</h3>
      <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
        <!-- <el-form-item label="商品編號" prop="goodsSn">
          <el-input v-model="goods.goodsSn" />
        </el-form-item> -->
        <el-form-item label="商品名稱" prop="name"  maxlength="100">
          <el-input v-model="goods.name" />
        </el-form-item>
        <el-form-item label="商品貨號" prop="artNo" maxlength="100" >
          <el-input v-model="goods.artNo" />
        </el-form-item>
        <!-- <el-form-item label="商品副標題" prop="subheading">
          <el-input v-model="goods.subheading" />
        </el-form-item>-->
        <!-- <el-form-item label="市場售價" prop="counterPrice">
          <el-input v-model="goods.counterPrice" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item> -->
        <el-form-item label="商品重量" prop="weight">
          <el-input v-model="goods.weight" placeholder="0" maxlength="11" show-word-limit  onkeyup="value=value.replace(/[^\d]/g,'')">
            <template slot="append">克</template>
          </el-input>
        </el-form-item>
           <el-form-item label="pv值" prop="pvValue">
          <el-input v-model="goods.pvValue" placeholder="0"  maxlength="11" show-word-limit onkeyup="value=value.replace(/[^\d]/g,'')">
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="是否推荐" prop="isNew">
          <el-radio-group v-model="goods.isNew">
            <el-radio :label="false">非推薦</el-radio>
            <el-radio :label="true">推薦</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="是否套餐" prop="isSetMeal">
          <el-radio-group v-model="goods.isSetMeal" @change="gotaocan">
            <el-radio :label="false">非套餐</el-radio>
            <el-radio :label="true">套餐</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否冷凍商品" prop="isFrozen">
          <el-radio-group v-model="goods.isFrozen">
            <el-radio :label="false">非冷凍</el-radio>
            <el-radio :label="true">冷凍</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否上架" prop="isOnSale">
          <el-radio-group v-model="goods.isOnSale">
            <el-radio :label="true">上架</el-radio>
            <el-radio :label="false">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="是否審核" prop="isHot">
          <el-radio-group v-model="goods.isOnSale">
            <el-radio :label="true">在售</el-radio>
            <el-radio :label="false">未售</el-radio>
          </el-radio-group>
        </el-form-item> -->

        <el-form-item label="商品圖片">
          <el-upload
            action="http://www.hometasty.info/demo/up.php"
            :show-file-list="false"
            :headers="headers"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
          >
            <img v-if="goods.picUrl" :src="goods.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>

        <el-form-item label="宣傳畫廊">
          <el-upload
            action="http://www.hometasty.info/demo/up.php"
            :limit="5"
            :headers="headers"
            :on-exceed="uploadOverrun"
            :on-success="handleGalleryUrl"
            :on-remove="handleRemove"
            multiple
            accept=".jpg,.jpeg,.png,.gif"
            list-type="picture-card"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>

        <el-form-item label="商品單位">
          <el-input v-model="goods.unit" placeholder="件 / 個 / 盒" />
        </el-form-item>

        <!-- <el-form-item label="關鍵字">
          <el-tag v-for="tag in keywords" :key="tag" closable type="primary" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input
            v-if="newKeywordVisible"
            ref="newKeywordInput"
            v-model="newKeyword"
            class="input-new-keyword"

            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
        </el-form-item> -->

        <el-form-item label="所屬分類">
          <el-cascader :options="categoryList" :props="{ checkStrictly: true }" expand-trigger="hover" clearable @change="handleCategoryChange" />
        </el-form-item>

        <!-- <el-form-item label="所屬品牌商">
          <el-select v-model="goods.brandId" clearable>
            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item> -->

        <el-form-item label="商品說明">
          <editor v-model="goods.brief" :init="editorInit" />
        </el-form-item>

        <el-form-item label="商品描述">
          <editor v-model="goods.detail" :init="editorInit" />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- <el-card class="box-card">
      <h3>商品規格</h3>
      <el-row :gutter="20" type="flex" align="middle" style="padding:20px 0;">
        <el-col :span="10">
          <el-radio-group v-model="multipleSpec" @change="specChanged">
            <el-radio-button :label="false">默認標準規格</el-radio-button>
            <el-radio-button :label="true">多規格支持</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col v-if="multipleSpec" :span="10">
          <el-button :plain="true" type="primary" @click="handleSpecificationShow">添加</el-button>
        </el-col>
      </el-row>

      <el-table :data="specifications">
        <el-table-column property="specification" label="規格名" />
        <el-table-column property="value" label="規格值">
          <template slot-scope="scope">
            <el-tag type="primary">
              {{ scope.row.value }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="picUrl" label="規格圖片">
          <template slot-scope="scope">
            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40">
          </template>
        </el-table-column>
        <el-table-column
          v-if="multipleSpec"
          align="center"
          label="操作"
          width="250"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleSpecificationDelete(scope.row)">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="specVisiable" title="設置規格">
        <el-form
          ref="specForm"
          :rules="rules"
          :model="specForm"
          status-icon
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="規格名" prop="specification">
            <el-input v-model="specForm.specification" />
          </el-form-item>
          <el-form-item label="規格值" prop="value">
            <el-input v-model="specForm.value" />
          </el-form-item>
          <el-form-item label="規格圖片" prop="picUrl">
            <el-upload
              :action="uploadPath"
              :show-file-list="false"
              :headers="headers"
              :on-success="uploadSpecPicUrl"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="specVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleSpecificationAdd">確定</el-button>
        </div>
      </el-dialog>
    </el-card> -->

    <el-card class="box-card">
      <h3>商品庫存</h3>
      <el-table :data="products">
        <el-table-column property="value" label="貨品規格">
          <template slot-scope="scope">
            <el-tag v-for="tag in scope.row.specifications" :key="tag">
              {{ tag }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="price" width="100" label="貨品售價" />
        <el-table-column property="counterPrice" width="100" label="折扣售價" />
        <el-table-column property="number" width="100" label="貨品數量" />
        <el-table-column property="url" width="100" label="貨品圖片">
          <template slot-scope="scope">
            <img v-if="scope.row.url" :src="scope.row.url" width="40">
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleProductShow(scope.row)">設置</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="productVisiable" title="添加貨品">
        <el-form
          ref="productForm"
          :model="productForm"
          status-icon
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="貨品規格列" prop="specifications">
            <el-tag v-for="tag in productForm.specifications" :key="tag">
              {{ tag }}
            </el-tag>
          </el-form-item>
          <el-form-item label="貨品售價" prop="price">
            <el-input v-model="productForm.price" type="number"/>
          </el-form-item>
          <el-form-item label="折扣售價" prop="counterPrice">
            <el-input v-model="productForm.counterPrice" type="number"/>
          </el-form-item>
          <el-form-item label="貨品數量" prop="number">
            <el-input v-model="productForm.number" maxlength="11" show-word-limit  onkeyup="value=value.replace(/[^\d]/g,'')"/>
          </el-form-item>
          <el-form-item label="貨品圖片" prop="url">
            <el-upload
              action="http://www.hometasty.info/demo/up.php"
              :show-file-list="false"
              :headers="headers"
              :on-success="uploadProductUrl"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img v-if="productForm.url" :src="productForm.url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="productVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleProductEdit">確定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <el-card class="box-card" v-if="taocan">
      <el-row>
        <el-col :span="22">
          <h3>套餐商品</h3>
        </el-col>
        <el-col :span="2" style="text-align:right">
          <el-button type="primary" size="mini" @click="selectgoods()">选择商品</el-button>
        </el-col>
      </el-row>

      <el-table :data="goodsItem">
        <el-table-column  label="商品名称">
          <template slot-scope="scope">
           {{scope.row.goodsName}}
          </template>
        </el-table-column>
        <el-table-column width="100" label="貨品售價">
          <template slot-scope="scope">
            价格：&{{scope.row.retailPrice}}
          </template>
        <!--  <div>
            价格：&88
          </div>-->
<!--          <template slot-scope="scope">-->
<!--          货品售价：辅导班不VB发的 -->
<!--          </template>-->
        </el-table-column>
        <el-table-column prop="number" width="100" label="套餐内數量">
          <template slot-scope="scope">
            {{scope.row.number}}
          </template>
        </el-table-column>
        <el-table-column  width="100" label="貨品圖片">
          <template slot-scope="scope">
            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40">
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width;">
          <template slot-scope="scope">
            <el-button type="text"  @click="deletetaocan(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="selectVisiable" title="选择商品">
        <el-form
          ref="selectForm"
          :model="selectForm"
          status-icon
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="选择商品" prop="value">
            <el-select v-model="selectForm.value" >
              <el-option v-for="item in selectOption" :key="item.goodsId" :value="item.goodsId" :label="item.goodsName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" prop="number">
            <el-input v-model="selectForm.number" type="number" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="selectVisiable = false">取消</el-button>
          <el-button type="primary" @click="selectgoodsSure">確定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <!-- <el-card class="box-card">
      <h3>商品參數</h3>
      <el-button type="primary" @click="handleAttributeShow">添加</el-button>
      <el-table :data="attributes">
        <el-table-column property="attribute" label="商品參數名稱" />
        <el-table-column property="value" label="商品參數值" />
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="attributeVisiable" title="添加商品參數">
        <el-form
          ref="attributeForm"
          :model="attributeForm"
          status-icon
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="商品參數名稱" prop="attribute">
            <el-input v-model="attributeForm.attribute" />
          </el-form-item>
          <el-form-item label="商品參數值" prop="value">
            <el-input v-model="attributeForm.value" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="attributeVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleAttributeAdd">確定</el-button>
        </div>
      </el-dialog>
    </el-card> -->

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handlePublish">上架</el-button>
    </div>

  </div>
</template>

<style>
  .el-card {
    margin-bottom: 10px;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .input-new-keyword {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .avatar-uploader .el-upload {
    width: 145px;
    height: 145px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>

<script>
import { publishGoods, listCatAndBrand ,selectGoods,listGoods,editGoods} from '@/api/goods'
import { createStorage, uploadPath } from '@/api/storage'
import Editor from '@tinymce/tinymce-vue'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'
import { getAddress } from '@/api/order'

export default {
  name: 'GoodsCreate',
  components: { Editor },

  data() {
    return {
      taocan:false,
      uploadPath,
      input:'',
      inputs:'',
      newKeywordVisible: false,
      newKeyword: '',
      keywords: [],
      categoryList: [],
      brandList: [],
      goods: { picUrl: '', gallery: [], isHot: false, isNew: false, isOnSale: true ,isSetMeal: false, isFrozen: false},
      specVisiable: false,
      specForm: { specification: '', value: '', picUrl: '' },
      multipleSpec: false,
      specifications: [{ specification: '規格', value: '標準', picUrl: '' }],
      productVisiable: false,
      productForm: { id: 0, specifications: [], price: 0.00, number: 0, url: '',counterPrice:0.0 },
      products: [{ id: 0, specifications: ['標準'], price: 0.00, number: 0, url: '',counterPrice:0.0 }],
      goodsItem: [],
      attributeVisiable: false,
      attributeForm: { attribute: '', value: '' },
      attributes: [],
      rules: {
        goodsSn: [{ required: true, message: '商品編號不能為空', trigger: 'blur' }],
        name: [{ required: true, message: '商品名稱不能為空', trigger: 'blur' }],
        artNo: [{ required: true, message: '商品貨號不能為空', trigger: 'blur' }]
      },
      editorInit: {
        language: 'zh_CN',
        height: 500,
        convert_urls: false,
        plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
        toolbar: ['fontsizeselect searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          createStorage(formData).then(res => {
            console.log(res)
            success(res.data.url)
          }).catch(() => {
            failure('上傳失敗，請重新上傳')
          })
        }
      },
      selectForm:{
        value:"请选择商品",
        number:0
      },
      selectVisiable:false,
      selectOption:[],
      selectIndex:null,
      selectdata:null

    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.init()
  },

  methods: {
    gotaocan(){
      if(this.goods.isSetMeal){
        this.taocan = true

      }else{
        this.taocan = false
      }
    },
    selectgoods(){
      selectGoods().then(response => {
        if (response.data.errno == 0) {
          this.selectOption = response.data.data
        } else {
          this.selectOption = []
        }
      })
     // console.log(this.selectgoods)
      this.selectVisiable = true
      // this.selectOption
    },
    selectgoodsSure(){
      var item
      for (var i = 0;i<this.selectOption.length;i++){
        if(this.selectOption[i].goodsId == this.selectForm.value){
          item = this.selectOption[i]
          item.name = this.selectOption[i].goodsName
          item.goodsId = this.selectOption[i].goodsId
          item.goodsSn = this.selectOption[i].goodsSn
          item.counterPrice = this.selectOption[i].retailPrice
          console.log(item)
          // return
        }
      }
      item.number = this.selectForm.number
      item.num = this.selectForm.number

      console.log(item)
      this.goodsItem.push(item)
      this.selectVisiable = false
    },
    deletetaocan(index,row){
      this.goodsItem.splice(index,1)
    },
    init: function() {
      listCatAndBrand().then(response => {
        this.categoryList = response.data.data.categoryList
        this.brandList = response.data.data.brandList
      })
    },
    handleCategoryChange(value) {
      this.goods.categoryId = value[value.length - 1]
    },
    handleCancel: function() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({ path: '/goods/list' })
    },
    handlePublish: function() {
      const finalGoods = {
        goods: this.goods,
        specifications: this.specifications,
        products: this.products,
        attributes: this.attributes,
        goodsItem: this.goodsItem
      }
      publishGoods(finalGoods).then(response => {
        if(response.data.errno != 0){
          MessageBox.alert('業務錯誤：' + response.data.errmsg, '警告', {
          confirmButtonText: '確定',
          type: 'error'
        })
          return false;
        }
        this.$notify.success({
          title: '成功',
          message: '創建成功'
        })
        listGoods({
          page: 1,
        limit: 1,
        sort: 'add_time',
        order: 'desc',
        }).then((response) => {
          finalGoods.goods.id=response.data.data.list[0].id
          editGoods(finalGoods)
                  .then((response) => {
                    this.$notify.success({
                      title: "成功",
                      message: "編輯成功",
                    });
                    this.$store.dispatch("tagsView/delView", this.$route);
                    this.$router.push({ path: "/goods/list" });
                  })
                  .catch((response) => {
                    MessageBox.alert("業務錯誤：" + response.data.errmsg, "警告", {
                      confirmButtonText: "確定",
                      type: "error",
                    });
                  });

            
                })
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.push({ path: '/goods/list' })
      }).catch(response => {
        MessageBox.alert('業務錯誤：' + response.data.errmsg, '警告', {
          confirmButtonText: '確定',
          type: 'error'
        })
      })
    },
    handleClose(tag) {
      this.keywords.splice(this.keywords.indexOf(tag), 1)
      this.goods.keywords = this.keywords.toString()
    },
    showInput() {
      this.newKeywordVisible = true
      this.$nextTick(_ => {
        this.$refs.newKeywordInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const newKeyword = this.newKeyword
      if (newKeyword) {
        this.keywords.push(newKeyword)
        this.goods.keywords = this.keywords.toString()
      }
      this.newKeywordVisible = false
      this.newKeyword = ''
    },
    uploadPicUrl: function(response) {
      this.goods.picUrl = response.url
    },
    uploadOverrun: function() {
      this.$message({
        type: 'error',
        message: '上傳文件個數超出限制!最多上傳5張圖片!'
      })
    },
    handleGalleryUrl(response, file, fileList) {
      // if (response.errno === 0) {
        this.goods.gallery.push(response.url)
      // }
    },
    handleRemove: function(file, fileList) {
      for (var i = 0; i < this.goods.gallery.length; i++) {
        // 這裏存在兩種情況
        // 1. 如果所刪除圖片是剛剛上傳的圖片，那麽圖片地址是file.response.data.url
        //    此時的file.url雖然存在，但是是本機地址，而不是遠程地址。
        // 2. 如果所刪除圖片是後臺返回的已有圖片，那麽圖片地址是file.url
        var url
        if (file.response === undefined) {
          url = file.url
        } else {
          url = file.response.data.url
        }

        if (this.goods.gallery[i] === url) {
          this.goods.gallery.splice(i, 1)
        }
      }
    },
    specChanged: function(label) {
      if (label === false) {
        this.specifications = [{ specification: '規格', value: '標準', picUrl: '' }]
        this.products = [{ id: 0, specifications: ['標準'], price: 0.00, number: 0, url: '',counterPrice:0.0 }]
      } else {
        this.specifications = []
        this.products = []
      }
    },
    uploadSpecPicUrl: function(response) {
      this.specForm.picUrl = response.data.url
    },
    handleSpecificationShow() {
      this.specForm = { specification: '', value: '', picUrl: '' }
      this.specVisiable = true
    },
    handleSpecificationAdd() {
      var index = this.specifications.length - 1
      for (var i = 0; i < this.specifications.length; i++) {
        const v = this.specifications[i]
        if (v.specification === this.specForm.specification) {
          if (v.value === this.specForm.value) {
            this.$message({
              type: 'warning',
              message: '已經存在規格值:' + v.value
            })
            this.specForm = {}
            this.specVisiable = false
            return
          } else {
            index = i
          }
        }
      }

      this.specifications.splice(index + 1, 0, this.specForm)
      this.specVisiable = false

      this.specToProduct()
    },
    handleSpecificationDelete(row) {
      const index = this.specifications.indexOf(row)
      this.specifications.splice(index, 1)
      this.specToProduct()
    },
    specToProduct() {
      if (this.specifications.length === 0) {
        return
      }
      // 根據specifications創建臨時規格列表
      var specValues = []
      var spec = this.specifications[0].specification
      var values = []
      values.push(0)

      for (var i = 1; i < this.specifications.length; i++) {
        const aspec = this.specifications[i].specification

        if (aspec === spec) {
          values.push(i)
        } else {
          specValues.push(values)
          spec = aspec
          values = []
          values.push(i)
        }
      }
      specValues.push(values)

      // 根據臨時規格列表生產貨品規格
      // 算法基於 https://blog.csdn.net/tyhj_sf/article/details/53893125
      var productsIndex = 0
      var products = []
      var combination = []
      var n = specValues.length
      for (var s = 0; s < n; s++) {
        combination[s] = 0
      }
      var index = 0
      var isContinue = false
      do {
        var specifications = []
        for (var x = 0; x < n; x++) {
          var z = specValues[x][combination[x]]
          specifications.push(this.specifications[z].value)
        }
        products[productsIndex] = { id: productsIndex, specifications: specifications, price: 0.00, number: 0, url: '',counterPrice:0.0 }
        productsIndex++

        index++
        combination[n - 1] = index
        for (var j = n - 1; j >= 0; j--) {
          if (combination[j] >= specValues[j].length) {
            combination[j] = 0
            index = 0
            if (j - 1 >= 0) {
              combination[j - 1] = combination[j - 1] + 1
            }
          }
        }
        isContinue = false
        for (var p = 0; p < n; p++) {
          if (combination[p] !== 0) {
            isContinue = true
          }
        }
      } while (isContinue)

      this.products = products
    },
    handleProductShow(row) {
      this.productForm = Object.assign({}, row)
      this.productVisiable = true
    },
    uploadProductUrl: function(response) {
      this.productForm.url = response.url
    },
    handleProductEdit() {
      for (var i = 0; i < this.products.length; i++) {
        const v = this.products[i]
        if (v.id === this.productForm.id) {
          this.products.splice(i, 1, this.productForm)
          break
        }
      }
      this.productVisiable = false
    },
    handleAttributeShow() {
      this.attributeForm = {}
      this.attributeVisiable = true
    },
    handleAttributeAdd() {
      this.attributes.unshift(this.attributeForm)
      this.attributeVisiable = false
    },
    handleAttributeDelete(row) {
      const index = this.attributes.indexOf(row)
      this.attributes.splice(index, 1)
    }
  }
}
</script>
